import React, { Component } from 'react';
import { Tabs, Card, Button, Table, Modal } from 'antd';

import DateChoose from '../../../components/DateChoose/index'
import Session from '../../../utils/Session'
import './index.scss'
import couponApi from '../../../api/coupon'
import tool from '../../../utils/commonFuc'


const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;
class CouponAnalysis extends Component {
    state = {
        key : "0",
        activeIndex:0,
        searchDataOverviewData:{
            range:"today",
            type:0,
            beginDate:'',
            deadlineDate:'',
        },
        rangeData:{
            0:{},
            1:{},
            2:{},
            3:{},
        },
        searchHeroData:{
            days:"0",
            level:'4',
            beginTime:'',
            endTime:'',
            page:1,
            rows:20
        },        
        dataOverviewData:{},
        dataOverviewList:[{
            key:'hasGet',
            name:"领取张数"
        },{
            key:'hasUse',
            name:"使用张数"
        },{
            key:'useRate',
            name:"使用率"
        },{
            key:'payMoney',
            name:"流水"
        },{
            key:'couponMoney',
            name:"优惠金额"
        },{
            key:'couponRate',
            name:"优惠费比"
        },],        
        columns :[{
            title:'名次',
            key:"rank",
            dataIndex:"rank"
          },{
            title:'姓名',
            key:"createUserName",
            dataIndex:"createUserName"
          },{
            title:'所在团队',
            key:"orgName",
            dataIndex:"orgName"
          },{
            title:'领取张数',
            key:"hasGet",
            dataIndex:"hasGet"
          },{
            title:'使用张数',
            key:"hasUse",
            dataIndex:"hasUse"
          },{
            title:'使用率',
            key:"useRate",
            dataIndex:"useRate"
          },{
            title:'优惠金额',
            key:"couponMoney",
            dataIndex:"couponMoney",
            render: (text, record) =>  {
                return <span>{ record.couponMoney?'￥'+record.couponMoney:record.couponMoney }</span>       
            }
          },{
            title:'优惠费比',
            key:"couponRate",
            dataIndex:"couponRate"
        },],         
    } 

    // 英雄榜组、军团点击
    handleGroupClick = (key,index)=>{
        this.setState({
            activeIndex:index,
            searchHeroData:Object.assign({},this.state.searchHeroData,{
                level:key
            })
        },()=>{
            this.handleCheckHero();
        })
    }

    componentWillMount(){
        //获取数据概览数据
        this.handleCheckData();
        //获取英雄榜数据
        this.handleCheckHero();
    }

    componentWillReceiveProps(newProps){
        this.setState({
            dataOverviewData:newProps.dataOverviewData[this.state.searchDataOverviewData.type]
        })
        this.pageObj.pageSize = this.state.searchHeroData.rows;
        this.pageObj.total = newProps.heroTotal;
    }

    // 获取数据概览
    handleCheckData = () => {
        this.props.onCheckDataOverviewData(this.state.searchDataOverviewData);
    }

    //获取英雄榜数据
    handleCheckHero = () => {
        this.props.onCheckHeroList(this.state.searchHeroData);
    }
    
    // 数据概览选择事件
    handleRangeClick = (data) =>{        
        this.setState({
            searchDataOverviewData:Object.assign({},this.state.searchDataOverviewData,{
                range:data.range,
                beginDate:data.beginTime,
                deadlineDate:data.endTime,                
            }),
            rangeData:Object.assign({},this.state.rangeData,{
                [this.state.key]:data            
            }),
        },()=>{
            console.log(JSON.stringify(this.state.rangeData))
            this.handleCheckData();
        })        
    }

    // 英雄榜时间选择事件
    handleDaysClick = (data) =>{
        this.setState({
            searchHeroData:Object.assign({},this.state.searchHeroData,{
                days:data.range,
                beginTime:data.beginTime,
                endTime:data.endTime,                
            })
        },()=>{
            this.handleCheckHero();
        })        
    }

    //点击tab页
    handleTabClick = (key) => {
        const { rangeData } = this.state;
        this.setState({
            key,
            searchDataOverviewData:{
                type:key-0,
                range:rangeData[key].range,
                beginDate:rangeData[key].beginTime,
                deadlineDate:rangeData[key].endTime,
            }
        },() => {
            this.handleCheckData();
        })        
        
    }

    //点击导出按钮
    handleExport = () => {
        confirm({
            title: '提示',
            content: '是否要导出券分析列表？',
            onOk:() => { 
                couponApi.exportCouponAnalysis(Object.assign({},this.state.searchDataOverviewData),(res)=>{
                    let objectUrl = window.URL.createObjectURL(new Blob([res], {
                        type: "application/vnd.ms-excel"
                      }))
                      // 文件地址
                      const link = document.createElement('a');
                      link.download = '券分析导出'+tool.getNowFormatDate()+'.xls';
                      link.href = objectUrl;
                      link.click();             
                  })  
            },
          });                     
    }

    // 表格分页对象
    pageObj = {
        size:"small",
        total:0,
        pageSize:this.state.searchHeroData.rows,
        showSizeChanger:true,
        showQuickJumper:true,
        showTotal:()=>`共 ${this.props.heroTotal} 条`,
        onChange:(page)=>{    
            this.setState({
                searchHeroData:Object.assign({},this.state.searchHeroData,{
                page
                })
            },()=>{
                this.handleCheckHero();
            })
        },
        onShowSizeChange: (page, rows)=> {
            let _obj = Object.assign({},this.state.searchHeroData,{
                rows
            });                
            this.setState({
                searchHeroData:_obj
            },()=>{
                this.handleCheckHero();
                }
            )
        }  
    }      

    TabComponent = () => (
        <div>
            <Card className="mb30">
                <DateChoose onDataChange={ this.handleRangeClick } btnList={ Session.rangeList } />
                <div className="statistics_box_container shadow_box">
                    {
                        this.state.dataOverviewList.map((item)=>(
                            <div className="statistics_box" key={item.key}>
                                <h2>{ this.state.dataOverviewData[item.key] }</h2>
                                <span>{ item.name }</span>
                            </div>  
                        ))  
                    }                      
                </div>
            </Card>
            <div className="dateChooseBox">
            {
                Session.btnGroupList.map((item,index)=>(                        
                    <Button key={index} className={["mb20","mr10",this.state.activeIndex==index&&"btnActive"].join(" ")} onClick={()=>{this.handleGroupClick(item.key,index)}}>{ item.name }</Button> 
                ))
                    
            }    
            </div>    
            <DateChoose onDataChange={ this.handleDaysClick } btnList={ Session.daysList }/>             
            <Card style={{ marginTop:20 }}>      
                <h3 className="color-black">英雄榜</h3>
                <Table rowKey="rank" pagination={this.pageObj} columns={this.state.columns} dataSource={this.props.heroList} />
            </Card>
        </div>
    )    
    render() {
        return (
            <div className="content">
                <Tabs defaultActiveKey={ this.state.key } onChange={this.handleTabClick} animated={false}>
                    <TabPane tab="全部" key="0">{<this.TabComponent />}</TabPane>
                    <TabPane tab="抵扣优惠券" key="1">{<this.TabComponent />}</TabPane>
                    <TabPane tab="满减优惠券" key="2">{<this.TabComponent />}</TabPane>
                    <TabPane tab="折扣优惠券" key="3">{<this.TabComponent />}</TabPane>
                </Tabs>
                <Button type="primary" className="btnExport" onClick={this.handleExport}>导出数据</Button>
            </div>
            )
    }
}
export default CouponAnalysis;